<template>
    <div class="article-list-page" style="margin-top:25px;">
      <ul class="games-data" :class="[model]">
        <li v-for="(item, idx) in data" :key="idx" class="dx-vd-item"  :class="{'no-data':!item.id}">
          <a class="fav-d-item" :href="'/article/' + item.id" target="_blank" v-if="item.id">
            <div class="img-flex-box">
              <div class="main-img">
                <img loading="lazy" :srcsets="item.srcsets" v-lazy="item.lazy" @error="loadError"/>
                <!-- <div class="ops">
                              <a class="i-del" title="删除" @click.stop="id=item.id;showDelConfirm=true;"></a>
                              <a class="i-edit" title="编辑" target="_blank" @click.stop="toPublish(item.id)"></a>
                          </div> -->
              </div>
  
              <!-- <div class="hid-el author">
                          <div class="ar-tit">暗夜突围-腾讯自中成起1908页</div>
                          <div class="u-box">
                          <img loading="lazy" class="avatar" src="https://image.gameuiux.cn/2022/09/30/1664467790270u=614515080,2288269124&fm=224&app=112&f=JPEG.jpg" alt="" />
                          <span class="name">欢喜冤家</span>
                          </div>
                      </div>
                      <a class="hid-el at-btn" v-if="i < 4">关注</a>
                      <a class="hid-el ated-btn" v-else>已关注</a>
                      <a class="hid-el edit-btn"></a> -->
            </div>
            <div class="bot-desc">
              <span class="file-name">{{ item.title }}</span>
              <!-- <span class="zan-num">{{item.praise}}</span> -->
              <!-- <span class="type-text">{{infoUrlEnum[item.topCategory.id].name}}</span> -->
            </div>
            <div class="bot-author">
              <a class="u" @click.stop="toUsercenter(item.member.id)">
                <span class="img-box">
                  <img loading="lazy" v-aimgd="{ avatar: item.member.avatar, id: item.member.id, w: 20, name: item.member.userName }" />
                </span>
                <span class="name">{{ item.member.userName }}
                  
                  <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover"  v-for="tag in item.member.tagsList">
                                                <i class="sm-tip" slot-content>{{tag.title}}</i>
                                                <img slot="reference" loading="lazy" class="u-m-tag" :src="tag.image" alt="">
                                                </el-popover>
                </span>
              </a>
              <div class="rt">
                <div class="like-num">
                  {{ item.praiseStr }}
                </div>
                <div class="vnum">
                  {{ item.seeStr }}
                </div>
              </div>
            </div>
          </a>
        </li>
      </ul>
  
      <!-- <transition name="fade"> -->
      <el-drawer :with-header="false" destroy-on-close :modal="false" append-to-body  :visible.sync="showInfo" direction="btt">
        <articleInfo @close="onInfoClose" :id="currentId" />
      </el-drawer>
      <!-- </transition> -->
    </div>
  </template>
  
  <script>
  import pswiper from '@/components/pswiper'
  import articleInfo from '@/components/articleinfo'
  import api from '@/api/api'
  export default {
    components: { articleInfo, pswiper },
    data() {
      return {
        infoUrlEnum: {
          22: { url: '/game/', name: '游戏' },
          1: { url: '/work/', name: '作品' },
          50: { url: '/video/', name: '短视频' },
          9: { url: '/article/', name: '文章' }
        },
        isFocus: false,
        model: 'small',
        currentId: '',
        showInfo: false,
        keyword: '',
        gTypes: [],
        list: [],
        queryParams: {
          orderByColumn: 'createTime',
          pageSize: 20,
          pageNum: 1,
          isAsc: 'desc',
          rank: '首页推荐',
          categoryId: 9
        },
        total: 0,
        hasMore: true,
        scrollLoaded: false,
        allCates: [],
        curAllCateKey: '',
        curCates: [],
        curFullPath: ''
      }
    },
    props:['data'],
    async mounted() {
        
    },
    methods: {
    loadError(e){
        e.target.removeAttribute('srcset');
    },
      onLoaded(e,item){
      let domainUrl=this.$imgdomainurl+'article-';
      let el=e.target;
      let _vtime=null;
      if(item.updateTime){
        _vtime=item.updateTime;
      }else if(item.createTime){
        _vtime=item.createTime;
      }else if(item.create_time){
        _vtime=item.create_time.replace('T',' ');
      }
      _vtime=Math.abs(new Date(_vtime).getTime());
      let srcsets=[];
      srcsets.push(domainUrl+item.id+'-'+_vtime+'@1x624.webp 1x');
      srcsets.push(domainUrl+item.id+'-'+_vtime+'@2x624.webp 2x');
      srcsets.push(domainUrl+item.id+'-'+_vtime+'@3x624.webp 3x');
      el.srcset=srcsets.join(',')
    },
    getimgObj(item){
      let _vtime=null;
      if(item.updateTime){
        _vtime=item.updateTime;
      }else if(item.createTime){
        _vtime=item.createTime;
      }else if(item.create_time){
        _vtime=item.create_time.replace('T',' ');
      }
      _vtime=Math.abs(new Date(_vtime).getTime());
      return{
        src:this.$imgdomainurl+'article-'+item.id+'-'+_vtime+'@1x624.webp',
        error: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png'),
        loading: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png')
      }
    },
      toUsercenter(id) {
        let routeData = this.$router.resolve({ path: "/user/" + id });
        window.open(routeData.href, '_blank');
      },
      chooseByCate(_item) {
        this.queryParams.categoryIds = _item.value;
        this.queryParams.pageNum = 1;
        this.list = [];
        this.scrollLoaded = false;
        this.hasMore = true;
        this.queryList();
      },
      chooseDevice(_device) {
        this.queryParams.device = _device == this.queryParams.device ? '' : _device;;
        this.queryParams.pageNum = 1;
        this.list = [];
        this.scrollLoaded = false;
        this.hasMore = true;
        this.queryList();
      },
      handleSearch() {
        this.queryParams.pageNum = 1;
        this.list = [];
        this.scrollLoaded = false;
        this.hasMore = true;
        this.queryList();
      },
      chooseScreen(_screen) {
        this.queryParams.orientation = _screen == this.queryParams.orientation ? '' : _screen;
  
        this.queryParams.pageNum = 1;
        this.list = [];
        this.scrollLoaded = false;
        this.hasMore = true;
        this.queryList();
      },
      onInfoClose() {
        window.history.pushState({}, 0, this.curFullPath);
        document.body.style.overflow = 'inherit';
        this.showInfo = false;
      },
      handleShowInfo(_item) {
        this.curFullPath=this.$route.fullPath;
        window.history.pushState({}, 0, '/article/' + _item.id);
        this.currentId = _item.id;
        document.body.style.overflow = 'hidden';
        this.showInfo = true;
      },
      handleCancelAllCate() {
        this.allCates.map((item) => {
          item.result.map((cate) => {
            cate.checked = false
          })
        })
        this.$forceUpdate()
      },
      handleConfirmSelectCate() {
        let datas = this.allCates.filter((r) => {
          return r.key == 'theme'
        })[0].result;
  
        let tags = [];
        datas.map(item => {
          if (item.checked) {
            tags.push(item.title);
          }
        })
        datas = this.allCates.filter((r) => {
          return r.key == 'style'
        })[0].result;
  
        let style = '';
        datas.map(item => {
          if (item.checked) {
            style = item.title;
          }
        })
  
        let categoryIds = [];
        datas = this.allCates.filter((r) => {
          return r.key == 'categoryThirdId'
        })[0].result;
        datas.map(item => {
          if (item.checked) {
            categoryIds.push(item.id);
          }
        })
  
        datas = this.allCates.filter((r) => {
          return r.key == 'era'
        })[0].result;
  
        let era = '';
        datas.map(item => {
          if (item.checked) {
            era = item.title;
          }
        })
  
        this.queryParams.tags = tags;
        this.queryParams.style = style;
        this.queryParams.categoryIds = categoryIds;
        this.queryParams.era = era;
        this.queryParams.pageNum = 1;
        this.list = [];
        this.scrollLoaded = false;
        this.hasMore = true;
        this.queryList();
      },
      chooseCate(_cate) {
        if (this.curAllCateKey == 'style' || this.curAllCateKey == 'era') {
          if (_cate.checked) {
            _cate.checked = !_cate.checked;
          }
          else {
            this.curCates.map(item => {
              item.checked = false;
            })
            _cate.checked = true;
          }
          this.$forceUpdate()
          return;
        }
        if (_cate.checked) {
          _cate.checked = !_cate.checked;
        } else {
          _cate.checked = !_cate.checked
        }
  
        this.$forceUpdate()
      },
      chooseCateByKey(_key) {
        this.curAllCateKey = _key
        this.curCates = this.allCates.filter((r) => {
          return r.key == _key
        })[0].result
      },
      handleLoadingMore() {
        this.queryParams.pageNum++
        this.queryList()
      },
      async queryList() {
        var that = this
  
        let result = await api.articlelist(that.queryParams)
  
        let old = that.list
  
        that.list = [...old, ...result.data]
  
        that.total = result.total
  
        let totalPage = result.total % that.queryParams.pageSize == 0 ? result.total / that.queryParams.pageSize : parseInt(result.total / that.queryParams.pageSize) + 1
        if (result.data && (result.data.length < that.queryParams.pageSize || that.queryParams.pageNum >= totalPage)) {
          that.hasMore = false
        } else {
          that.hasMore = true
        }
        that.scrollLoaded = true
      },
      version(time) {
        let date = new Date(time)
        return date.getTime()
      },
      handleGmCatePrev() {
        this.gmswiper.slidePrev()
      },
      handleGmCateNext() {
        this.gmswiper.slideNext()
      },
    },
  }
  </script>